<template>
	<view>
		
		<!-- 头部导航栏 -->
		<view class="" v-if="role=='MASTER'" style="width: 100%;margin: auto;background-color: #fff;padding-top: 20rpx;">
		
			<van-row>
				
				<van-col span="8" style="text-align: center;">
					<view class="" @click="renameGroup" style="width: 100rpx;margin: auto;">
						<van-image width="100rpx" height="90rpx"
							src="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/改进.png" />
						<text style="font-size: 24rpx;">修改群名</text>
					</view>
					<!-- <text>加入群组</text> -->
				</van-col>
				<van-col span="8" style="text-align: center;">
					<view class="" @click="applyGroup" style="width: 100rpx;margin: auto;">
						<van-image width="100rpx" height="90rpx"
							src="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/审核.png" />
						<text style="font-size: 24rpx;">加群审批</text>
					</view>
					<!-- <text @click="addClick">新建群组</text> -->
				</van-col>
				<van-col span="8" style="text-align: center;">
					<view class="" :data-groupId="id" @click="deleteGroup" style="width: 100rpx;margin: auto;">
						<van-image width="100rpx" height="90rpx"
							src="cloud://cu4oral6-9g3l2orjbb347b4c.6375-cu4oral6-9g3l2orjbb347b4c-1307874055/报错.png" />
						<text style="font-size: 24rpx;">群组解散</text>
					</view>
					<!-- <text @click="addClick">新建群组</text> -->
				</van-col>
			</van-row>
		</view>
		
		
		<van-cell :title="'成员('+list.length+'人)'">
		  <van-tag  plain type="primary">邀请成员</van-tag>
		</van-cell>
		
		<van-index-bar :index-list="indexList">

			<view v-for="(item,index1) in json_sort">
				<van-index-anchor :index="index1" v-if="item.length"></van-index-anchor>
				<view class="" v-for="(item1,index2) in item">
					<van-cell  is-link @click="editUser" :data-userId="item1.userId" :data-orgName="item1.userEnt.orgName" >
						 <view slot="title">
						    <view class="van-cell-text"><van-tag v-if="item1.role=='MASTER'" type="primary">管理员</van-tag> <text>{{item1.userEnt.name}}</text></view>
						    
						  </view>
					</van-cell>
				</view>

			</view>
		</van-index-bar>
		<van-action-sheet :show=" show " @click-overlay="onClose()" :actions="actions" @cancel="onClose" @select="onSelect" cancel-text="取消"/>
		
		<!-- 群组改名 -->
		<van-dialog use-slot title="群组改名" :show="showRename" show-cancel-button @confirm="onConfirm" @cancel="onCancel">
			<van-cell-group>
				<van-field :value="valueRename" placeholder="限20个字" @change="onChange" maxlength="20"
					custom-style="border:2rpx solid #969799;width:95%;margin:auto;border-radius:10rpx;" />
			</van-cell-group>
		</van-dialog>
		
		<!-- 删除确认 -->
		<van-dialog id="van-dialog" />
		
		<!-- 轻提示 -->
		<van-toast id="van-toast" />
	</view>
</template>

<script>
	import Toast from '../../wxcomponents/vant/toast/toast';
	import wrap from '@/components/wrap';
	import Dialog from '../../wxcomponents/vant/dialog/dialog';
	import pinyin from "wl-pinyin"
	export default {
		data() {
			return {
				id: "3",
				groupName:"",
				role:"",
				list: null,
				json_sort: null,
				indexList: [],
				show: false,
				showRename:false,
				valueRename:"",
				actions: []
			}
		},
		methods: {
			//群组改名
			renameGroup(){
				this.showRename = true;
			},
			onConfirm(){
				uni.request({
					url: this.apiurl + '/group/group',
					method: "PUT",
					data: {
						"id": this.id,
						groupName:this.valueRename
					},
					header: {
						'Authorization': uni.getStorageSync("token")
					},
					success: (res) => {
						if (res.data.status == 1) {
							Toast.success('更改成功');
							this.showRename = false
							this.groupName = this.valueRename
							wx.setNavigationBarTitle({
							   title: this.groupName
							})
						} else {
							Toast.fail("系统异常")
						}
							
					}
				});
				
			},
			onChange(event){
				this.valueRename = event.detail
			},
			onCancel(){
				this.showRename = false
			},
			//处理申请信息
			applyGroup(e){
				uni.navigateTo({
				    url: '../applyGroup/applyGroup?id='+this.id
				});
			},
			//群组解散
			deleteGroup(event) {
				console.log(this.id)
				// console.log(event)
				Dialog.confirm({
						title: '删除',
						message: '是否删除群组',
					})
					.then(() => {
						// on confirm
						uni.request({
							url: this.apiurl + '/group/group',
							method: "DELETE",
							data: {
								"id": this.id
							},
							header: {
								'Authorization': uni.getStorageSync("token")
							},
							success: (res) => {
								if (res.data.status == 1) {
									Toast.success('删除成功');
									uni.switchTab({
									    url: '/pages/myTeam/myTeam'
									});
								} else {
									Toast.fail("系统异常")
								}
			
							}
						});
			
					})
					.catch(() => {
						// on cancel
					});
			
			},
			//获取groupid
			getId(options) {
				// console.log(options)
				this.id = options.groupId;
				this.groupName = options.groupName;
				this.valueRename = this.groupName;
				this.role = options.role;
				wx.setNavigationBarTitle({
				   title: this.groupName
				})
				
			},
			onClose() {
				this.show = false
			},

			onSelect(event) {
				console.log(event.detail);
			},
			editUser(event) {
				console.log(event.target.dataset)
				this.show = true;
				this.actions[0] = {};
				this.actions[0]["name"] = "id:" + event.target.dataset.userid;
				this.actions[1] = {};
				this.actions[1]["name"] = "机构：" + event.target.dataset.orgname;
				console.log(this.actions)
			},
			
			

			/**
			 * 获取成员信息
			 */
			getUsers() {
				uni.request({
					url: this.apiurl + '/group/users',
					data: {
						groupId: this.id,
						pageNum: 1,
						pageSize: 20
					},
					header: {
						'Authorization': uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						this.list = res.data.list
						console.log("list_length"+this.list.length)
						//对list排序分组
						this.json_sort = JSON.parse(JSON.stringify(this.data_letter_sort(this.list)))
						console.log(JSON.parse(JSON.stringify(this.json_sort)))
						
						//遍历json_sort，获取索引
						for (let i in JSON.parse(JSON.stringify(this.json_sort))) {
							if (JSON.parse(JSON.stringify(this.json_sort))[i].length)
								this.indexList.push(i)
						}
					}
				});
			},

			//修改个人信息
			putUsers() {
				uni.request({
					url: this.apiurl + '/user/user_info',
					data: {
						"email": "48672421@qq.com",
						"name": "徐天",
						"orgName": "菏泽学院",
						"teleNumber": "19861603231"
					},
					method: "PUT",
					header: {
						'Authorization': uni.getStorageSync("token")
					},
					success: (res) => {
						console.log(res.data);
						// this.list = res.data.list

					}
				});
			},

			//将获取到的json数据按照姓氏首字母排序分组
			data_letter_sort(data) {
				var letter_reg = /^[A-Z]$/;
				var list = new Array();
				for (var i = 0; i < data.length; i++) {
					// 添加 # 分组，用来 存放 首字母不能 转为 大写英文的 数据
					list['#'] = new Array();
					// 首字母 转 大写英文
					// letter = (data[i][field]).substr(0, 1).toUpperCase();
					// 是否 大写 英文 字母
					let letter = pinyin.getFirstLetter(data[i].userEnt.name)[0]
					// console.log(letter)
					if (!letter_reg.test(letter)) {
						letter = '#';
					}
					// 创建 字母 分组
					if (!(letter in list)) {
						list[letter] = new Array();
					}
					// 字母 分组 添加 数据
					list[letter].push(data[i]);
				}
				// 转换 格式 进行 排序；
				var result = new Array();
				for (var key in list) {
					result.push({
						letter: key,
						list: list[key]
					});
				}
				result.sort(function(x, y) {
					return x.letter.charCodeAt(0) - y.letter.charCodeAt(0);
				});
				// # 号分组 放最后
				var last_arr = result[0];
				result.splice(0, 1);
				result.push(last_arr);

				// 转换 数据 格式
				var json_sort = {}
				for (var i = 0; i < result.length; i++) {
					json_sort[result[i].letter] = result[i].list;
				}

				return json_sort;
			}

		},
		onLoad(options) {
			this.getId(options);
			this.getUsers();
			

		},
		computed: {
			// json_sort(){
			// 	return this.data_letter_sort(this.list)
			// }
		}
	}
</script>

<style>
	.member {
		background-color: #fff;
		padding: 10px 16px;
	}

	.cell__title:empty,
	.cell__value:empty {
		display: none;
	}

	.cell__value::after {
		content: '';
		width: 95%;
		height: 1px;
		display: block;
		margin: 0 auto;
		background-color: #969799;
		border-radius: 30px;
	}
</style>
